<!-- Component : SearchBox  - Begin  -->
<!-- Source : /common/components/ui/searchbox/_searchBox.gsp -->

<form class="navbar-search no_margin" id="form__${id}" data-bind="submit: textUpdated" >
  <input type="text" class="input-medium search-query logo ${cssClasses}" id="${id}" data-bind='value: firstName' placeholder="Procurar ...">
</form>

<bootstrap:onReady>

	console.log("LOG: %s", 'Component : SearchBox  - Begin. !');

	// This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI
	var __${id}_Model = function () {

		var self = this;

		
		self.firstName = ko.observable("Bert"),
	    
		self.textUpdated = function() {
	    	//console.log("LOG: %s - %s", 'SearchBox Updated : ',self.firstName());

	    	var event = new $.Event();
	    	event.type          = "searchBoxChanged";
	    	event.target        = $("${id}");
	    	event.model         = self;
	    	event.searchBoxName = "${id}";
	    	event.searchText    = self.firstName();
	    	 
            $(document).trigger(event);
	    	
	    }
	    
	}
	

	console.log("LOG: %s - %o", 'Component : SearchBox', $("#${id}"));
	
	$("#form__${id}").koApplyBindings(new __${id}_Model());	   

	console.log("LOG: %s", 'Component : SearchBox  - End !');
	
</bootstrap:onReady>

<!-- Component : SearchBox  - End  -->